<template>
    <div class="header-container">
        <div class="left-content">
            <el-button @click="HandleMenu" :type="type" :icon="Grid" plain/>
            <el-breadcrumb style="margin-left: 20px;" separator="/">
                <el-breadcrumb-item v-for="tab in tabs" :key="tab.path" :to="tab.path">
                    <span style="color: white;">{{tab.label}}</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="right-content">
            <div v-if="$store.state.user.isLogin === false">
                <router-link to="/login">登录</router-link>
            </div>
            <el-dropdown v-if="$store.state.user.isLogin === true" trigger="click" style="color: white;">
                <span class="el-dropdown-link" style="display: flex;align-items: center;margin-right: 20px;">
                  <img :src="$store.state.user.photo" class="avatar">
                  <span class="nameStyle">{{$store.state.user.username}}<el-icon class="el-icon--right"><arrow-down /></el-icon></span>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item :icon="UserFilled" @click="toPersonal">个人中心</el-dropdown-item>
                    <el-dropdown-item :icon="CircleCloseFilled" @click="Logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>
<script>
    import {ref} from 'vue'
    import {useStore} from 'vuex';
    import {useRouter} from 'vue-router';
    import { ElMessage } from 'element-plus'
    import {Grid,UserFilled,CircleCloseFilled} from '@element-plus/icons-vue';
    export default{
        name:'CommonHeader',
        setup() {
            const type = ref("primary")
            const router = useRouter();
            const store = useStore();
            const tabs = store.state.menu.tabs;
            const icon = {Grid,CircleCloseFilled,UserFilled}
            //跳转个人中心
            let toPersonal = function(){
                router.push({
                    path:'/personal'
                })
            }
            let HandleMenu = function(){
                if(type.value === 'success'){
                    type.value = 'primary';
                }else{
                    type.value = 'success';
                }
                store.commit('CollapseMenu')
            }
            let Logout = function(){
                ElMessage({
                    message: '退出成功!',
                    grouping: true,
                    type: 'warning',
                })
                store.commit('Logout');
                localStorage.removeItem('jwt_token');
                router.push({
                    path:'/login'
                })
            }
            return {
                HandleMenu,
                toPersonal,
                tabs,
                type,
                Logout,
                ...icon
            }
        },
    }
</script>
<style scoped> 
.header-container{
    padding-left: 20px;
    background-color:#565657;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.avatar{
    margin-right: 8px;
    border-radius: 50%; 
    width: 40px;
    height: 40px;
}
.nameStyle,.avatar:hover{
    cursor: pointer;
}
.nameStyle{
    font-family: cursive;
    font-size: 16px;
    font-weight: bold;
}
.left-content{
    display: flex;
    align-items: center;
}
a{
    margin-right: 10px;
    text-decoration: none;
    color: white;
}
</style>